<template>
  <div>
    <ElHeader></ElHeader>
    <el-container>
      <div class="bgi">
        <img
          width="100%"
          src="http://www.yhachina.com/images/exhibition/exhibition-banner5.jpg"
          alt=""
        />
        <div class="text">
          <span>汉庭酒店精品大床房</span>
        </div>
      </div>
      <div class="main">
        <div class="content">
          <div>
            <span>精品大床房</span>
            <span
              >{{ this.hotel.area }},{{ this.hotel.breakfast }},{{
                this.hotel.window
              }},{{ this.hotel.bedtype }}</span
            >
          </div>
          <el-divider></el-divider>
          <div>
            <span style="display: block; font-weight: bold; margin-bottom: 10px"
              >订房必读</span
            >
            <span style="display: block"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据酒店通知，疫情期间，入住酒店需提供上海本地核酸检测，请在下单前与酒店确认接待政策。(提示有效期2022/11/06至2023/02/06)</span
            >
            <span
              >&nbsp;&nbsp;&nbsp;&nbsp;
              为贯彻落实《上海市生活垃圾管理条例》相关规定，推进生活垃圾源头减量，上海市文化和旅游局特制定《关于本市旅游住宿业不主动提供客房一次性日用品的实施意见》，2019年7月1日起，上海市旅游住宿业将不再主动提供牙刷、梳子、浴擦、剃须刀、指甲锉、鞋擦这些一次性日用品。若需要可咨询酒店。</span
            >
          </div>
          <el-divider></el-divider>
          <div>
            <div class="block">
              <span class="demonstration" style="font-weight: bold"
                >请选择入住时间和退房时间：</span
              >
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="2022-12-01"
                end-placeholder="2022-12-02"
              >
              </el-date-picker>
            </div>
            <el-divider></el-divider>
            <span style="font-weight: bold; margin-bottom: 10px"
              >住客资料<span
                style="font-size: 12px; font-weight: normal; color: #333"
                >(请按实际入住人数填写，姓名与证件保持一致)</span
              ></span
            >
            <el-form
              :rules="rules"
              :model="form"
              label-width="70px"
              style="margin-top: 10px"
            >
              <el-form-item label="住客姓名">
                <el-input v-model="form.user"></el-input>
              </el-form-item>
              <el-form-item label="电话号码" prop="phone">
                <el-input v-model.number="form.phone"></el-input> </el-form-item
            ></el-form>
          </div>
          <el-divider></el-divider>
          <div>
            <span style="font-weight: bold; display: block; margin-bottom: 10px"
              >特别要求</span
            >
            <el-form :model="form">
              <el-form-item>
                <el-input type="textarea" v-model="form.jianyi"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <el-divider></el-divider>
          <div
            style="display: flex; justify-content: space-between; width: 100%"
          >
            <div>
              <span>在线付</span
              ><span style="font-size: 22px; color: orange; font-weight: bold"
                >￥{{ this.hotel.rprice }}</span
              >
            </div>
            <div><el-button type="warning">去支付</el-button></div>
          </div>
        </div>
        <div class="aside" style="width: 250px">
          <div
            style="
              display: flex;
              justify-content: space-between;
              width: 100%;
              border-bottom: 1px dashed #333;
              padding: 20px 0;
            "
          >
            <span style="font-size: 20px; font-weight: bold">应付总额</span>
            <span style="font-size: 20px; color: orange"
              >￥{{ this.hotel.rprice }}</span
            >
          </div>
          <div style="border-bottom: 1px dashed #333; padding: 10px 0">
            <span style="display: block; font-weight: bold; padding: 0 0 10px 0"
              >30分钟内免费取消</span
            >
            <span>
              订单确认后30分钟内可免费取消。逾期不可取消/修改，若未入住将收取您全额房费¥332（如用优惠券则以券后支付价为准）。订单需等酒店或供应商确认后生效，订单确认结果以携程短信、邮件或app通知为准，如订单不确认将全额退款至您的付款账户。</span
            >
          </div>
          <div style="border-bottom: 1px dashed #333; padding: 10px 0">
            <span
              style="display: block; font-weight: bold; padding: 0 0 10px 0"
            >
              说明
            </span>
            <span>
              预订服务由携程旗下上海赫程国际旅行社有限公司及其分公司提供、住宿服务由酒店提供，交易款项由商家委托携程旗下子公司统一收取。
            </span>
          </div>
        </div>
      </div>
    </el-container>
    <ElFooter></ElFooter>
  </div>
</template>

<script>
import ElFooter from '@/components/ElFooter.vue'
import ElHeader from '@/components/ElHeader.vue'
export default {
  components: { ElFooter, ElHeader },
  data() {
    return {
      value1: '',
      value2: '',
      rid: this.$route.params.rid,
      hotel: '',
      form: {
        user: '',
        phone: '',
        jianyi: '',
      },
      rules: {
        user: [{ required: true, message: '请输入账号', trigger: 'blur' }],
      },
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur',
        },
      ],
    }
  },

  mounted() {
    // 加载当前旅社的信息
    let params = { rid: this.rid }
    this.$http.lsApi.queryHotelRoom(params).then(res => {
      console.log(res)
      this.hotel = res.data.data[0]
      console.log(this.hotel)
    })
  },
}
</script>
<style lang="scss" scoped>
.el-container {
  display: block;
}
.bgi {
  padding: 0;
  margin: 30px 0 0 0;
  width: 100%;
  height: 320px;
  .img {
    width: 1021px;
  }
  .text {
    background-color: white;
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    bottom: 60px;
    padding: 30px;
    color: #333;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    span:nth-child(1) {
      display: block;
      font-size: 30px;
      font-weight: 1.5rem;
    }
    span:nth-child(2) {
      display: block;
      font-size: 15px;
      padding: 5px 0;
    }
  }
}
.main {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 80px auto 60px;
  .content {
    width: 900px;
    > div:nth-child(1) {
      width: 100%;
      span:nth-child(1) {
        margin-bottom: 10px;
        display: block;
        font-weight: bold;
      }
    }
    > div:nth-child(2) {
      width: 100%;
      span:nth-child(1) {
        display: block;
        font-weight: bold;
      }
      span:nth-child(2) {
        display: block;
        font-size: 14px;
      }
      span:nth-child(3) {
        display: block;
        font-size: 14px;
      }
    }
    > div:nth-child(3) {
      width: 100%;
    }
  }
}
</style>
